<script setup lang="ts">
import dayjs from 'dayjs';
import {LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined} from '@ant-design/icons-vue';
import {inject, onMounted, ref} from 'vue';
import relativeTime from 'dayjs/plugin/relativeTime';
import emitter from '@/utils/emitter.ts'
import commentApi from '@/api/comment.ts'
import useUserStore from '@/store/modules/user.ts'
const userStore = useUserStore()
// import CommentBox from '../comment-box/index.vue'
dayjs.extend(relativeTime);
const articleId = inject('articleId')
onMounted(async () => {
  const result = await commentApi.getCommentPage(articleId)
  if (result.code == 200) {
    comments.value = result.data.map((v:any)=> {
      return {
        id: v.id,
        author: v.user.nickname,
        avatar: v.user.avatar,
        content: v.content,
        currentUserIsLike: v.currentUserIsLike,
        likeNum: v.likeNum,
        dislikeNum: v.dislikeNum,
        datetime: v.createTime
      }
    })
  }
})
type Comment = Record<string, string>;

const comments = ref<Comment[]>([]);
emitter.on('comments', (v: Comment[]) => {
  comments.value.push(v)
})

const like = async (value:any) => {
  const result = await commentApi.likeComment({id:value.id,isLike:true,currentLikeUserId:userStore.userInfo.id})
  comments.value.forEach((v:any) => {
    if (v.id == value.id) {
      v.currentUserIsLike = result.data.currentUserIsLike
      v.likeNum = result.data.likeNum
      v.dislikeNum = result.data.dislikeNum
      v.currentUserIsLike = result.data.currentUserIsLike
    }
  })
};

const dislike =async (value:any) => {
  const result = await commentApi.likeComment({id:value.id,isLike:false,currentLikeUserId:userStore.userInfo.id})
  comments.value.forEach((v:any) => {
    if (v.id == value.id) {
      v.currentUserIsLike = result.data.currentUserIsLike
      v.likeNum = result.data.likeNum
      v.dislikeNum = result.data.dislikeNum
      v.currentUserIsLike = result.data.currentUserIsLike
    }
  })
};
const isReply = ref<boolean>(false);
const reply = () => {
  isReply.value = true
}
</script>

<template>
  <div class="comment-item">
    <a-list
        v-if="comments.length"
        :data-source="comments"
        :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
        item-layout="horizontal"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-comment>
            <template #actions>
              <span key="comment-basic-like">
                <a-tooltip title="Like">
                  <template v-if="item.currentUserIsLike === 'liked'">
                    <LikeFilled @click="like(item)"/>
                  </template>
                  <template v-else>
                    <LikeOutlined @click="like(item)"/>
                  </template>
                </a-tooltip>
                <span style="padding-left: 8px; cursor: auto">
                  {{ item.likeNum }}
                </span>
              </span>
              <span key="comment-basic-dislike">
                <a-tooltip title="Dislike">
                  <template v-if="item.currentUserIsLike === 'disliked'">
                    <DislikeFilled @click="dislike(item)"/>
                  </template>
                  <template v-else>
                    <DislikeOutlined @click="dislike(item)"/>
                  </template>
                </a-tooltip>
                <span style="padding-left: 8px; cursor: auto">
                  {{ item.dislikeNum }}
                </span>
              </span>
<!--              <span key="comment-basic-reply-to" @click="reply">Reply to</span>-->
              </template>
              <template #author><a>
                {{ item.author }}
              </a></template>
              <template #avatar>
                <a-avatar :src="item.avatar" alt="Han Solo"/>
              </template>
              <template #content>
                <p>
                  {{ item.content }}
                </p>
              </template>
              <template #datetime>
                <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
                  <span>{{ dayjs().fromNow() }}</span>
                </a-tooltip>
              </template>
          </a-comment>
<!--          <comment-box v-if="isReply"></comment-box>-->
        </a-list-item>
      </template>
    </a-list>

  </div>
</template>
<style scoped>

</style>
